<template>
	<view class="tn-flex tn-margin-xs tn-padding-top-sm tn-flex-wrap">
		<view v-for="(item,index) in catelist" :key="index" class="cate  tn-padding-sm tn-margin-xs tn-radius"
			@click="onItem(item)">
			<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
				<!-- tn-main-gradient-purplered--light -->
				<view
					class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur  tn-color-purplered">
					<!-- <view class="tn-icon-fire-fill tn-three"></view> -->
					<image :src="item.icon" style="width: 80rpx;height: 80rpx;"></image>
				</view>
				<view class="tn-color-black tn-text-center">
					<text class="tn-text-ellipsis tn-padding-top-xs">{{item.name}}</text>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	import {
		GethallSvc
	} from '@/api/hot/index'
	export default {
		data() {
			return {
				catelist: [],
				tabKey: [
					'/pages/home/index',
					'/pages/enterprise/index',
					'pages/Property/index',
					'pages/my/index'
				]
			}
		},
		mounted() {
			this.gethallSvc()
		},
		methods: {
			// 跳转
			tn(e) {
				uni.navigateTo({
					url: e,
				});
			},
			gethallSvc() {
				let param = {
					pageable: 0
				}
				GethallSvc(param).then((res) => {
					this.catelist = res.data
				})
			},
			onItem(item) {
				let type = item.type
				switch (type) {
					case 0:
						this.tn(`/pages/policy/details?id=${item.targetId}`)
						break;
					case 1:
						this.tn(`/pages/enterprise/details?cateid=${item.targetId}`)
						break;
					case 2:
						this.tn(`/subcontract/hot/details?id=${item.id}`)
						break;
					case 3:
						if (this.tabKey.indexOf(item.link)) {
								uni.switchTab({
									url: item.link
								});
						}
						this.tn(item.link)
						break;
				}

			}
		}
	}
</script>

<style lang="scss" scoped>
	.cate {
		width: 220rpx;
		padding: 20rpx 0;
		text-align: center;

		margin: 20rpx 10rpx;
	}
</style>